<template>
  <div >
        <div class="ce">
        <div class="shoping">
            <div class="xq">
            <img :src="img">
            </div>
        
        <div class="discount">
            <div class="price">
                <span class="zhehoujia">￥{{price}}</span><br>
                <span class="yuanjia">￥499</span><span>5.2折</span>
            </div>
            <div class="shenghuoguan">
                <img src="../../public/assets/shenghuoguan.webp" alt="">
            </div>
        </div>
        <div class="mingchen">
            <span class="biaoti">{{name}}</span>
            <div class="green">
                <span>7天可退</span><span>首单30元免邮</span><span>上门退款</span>
            </div>
        </div>
        <div class="zhengpin">
            <img src="../../public/assets/zhengpin.webp" alt="">
            <span>100%正品·专业鉴定·正品险</span>
            <span class="jiantou">></span>
        </div>
        </div>
        <div class="bottom">
            <div class="tubiao">
                <img src="../../public/assets/kefu.png" alt=""><br><span>客服</span>
            </div>
            <div class="tubiao">
                <img src="../../public/assets/gouwuche.png" alt=""><br><span>购物车</span>
            </div>
            <div class="count">
                <div class="jiage1">
                    <span>￥499</span>
                </div>
                <div class="jiage2">
                    <div class="pri">
                    <span>￥{{price}} </span>
                    </div>
                    <div class="pri2" v-on:click='add2Card'>
                    <span>特卖价 抢</span>
                    <img src="../../public/assets/jiantou.png" alt="">
                    </div>
                </div>
            </div>
        </div>
     </div>
  </div>
</template>

<script>



export default {
  name: 'Detail',
  props:['name','id','price','img','num'],
  data(){
    return{
      title:''
    }
  },
  methods:{
    add2Card:function(){
         // 作业完善这个购物车，问题 新增商品，同一个商品，还是没达到num 累加的效果，还是会新增一条
         let key = 'cart';
         let pro ={id:this.id,name:this.name,price:this.price,img:this.img,num:1};
         //购物车，可以有多个商品，需考虑之前的购物车又没数据？
         let allProducts = localStorage.getItem(key);//因为商品可以有多个，在购物车中，商品的信息类型是一致的，所以建议存储在数组
         //数组的字符串怎么转成数组?
         allProducts = JSON.parse(allProducts);       
         //此次购物的商品可能已经存在购物车中
         //还需要判断，是否是第一次购物，第一购物，没有数据
         if(allProducts){
          let inPro=false;   
          for(let key in allProducts){//引用传递
             let detailPro = allProducts[key];//取出购物车中的每一个商品
             //如果此次的购物商品已经存在
             //console.log(detailPro.id,pro.id)
             if(detailPro.id==pro.id){
                 detailPro.num++;//detailPro 是 allProducts 中的其中一条数据
                 inPro=true;
             }
          }
          if(!inPro){
              allProducts.push(pro);
          }
         }else{//没有购物时候
            allProducts=[];
            allProducts.push(pro);
         }    
         localStorage.setItem(key,JSON.stringify(allProducts));
        //window.location.href='http://localhost:8080/#/cartList' 原生js 跳转
        //编程式的路由调转
        //router 和 route 有啥区别? router 只有一份，每个组件共享，route 每个组件都有
        this.$router.push({path:'/cartList'})//path 方式调转
        //this.$router.push({name:'cartList',query:{order:'123'}});// name 的方式调转
        //this.$router.replace({path:'/cartList'})//也可实现类似的效果，
        //push 和 replace 的区别，push 会把url 向数组方式 push 进去，replace，把上一次的路径替换下
        //adv  ---detail----cartList  回去  adv
        //window.history.go(-2)
        //this.$router.history.go(1);
        //console.log(this.$router)
    }
  },
  mounted(){
    // console.log(this);
    // // console.log(this.$route.query.name);
    // //this.id = this.$route.params.id
    // // console.log( this.$route.params);
    // for(let name in this.$route.params){
    //   this[name]=this.$route.params[name]
    // }

  },
  // computed:{
  //   ids:function(){
  //     return this.$route.params.id
  //   },
  //   names:function(){
  //     return this.$route.params.name
  //   },
  // }
}
</script>
<style scoped>
ul {
    list-style: none;
    display: flex;
    justify-content: space-between;
    border-left: 2px solid #ddd;
}
.xq img {
    width: 100%;

}
.ce {
    width: 100%;
    background-color: #F3F4F5;
}
.discount {
    width: 100%;
    height: 90px;
    background-color: antiquewhite;
    background-image: url(../../public/assets/beijing.webp);
    background-size: 460px 90px;
    display: flex;
    justify-content:space-between;
}
.price {
    color: #fff;
    margin: 13px 20px;
}
.price .zhehoujia {
    font-size: 30px;
}
.price .yuanjia {
    text-decoration:line-through;
    margin-right: 10px;
}
.shenghuoguan img {
    width: 85px;
    margin: 30px 15px;
}

.mingchen {
    width: 426px;
    height: 102px;
    padding: 10px 20px;
    background-color: #fff;
}
.mingchen .biaoti {
    color: #222;
    font-size: 19.5px;
}   
.green {
    margin-top: 8px;
}
.green span {
    width: 63px;
    height: 19px;
    background-color: #36C88E;
    color: #fff;
    font-size: 12px;
    margin-right: 10px;
    padding: 5px 8px;
    border-radius: 10%;
}

.zhengpin {
    width: 422px;
    height: 25px;
    background-color: #fff;
    margin: 15px 0;
    padding: 22px;
}
.zhengpin img {
    width: 90px;
    height: 17px;
    margin-right: 20px;
}
.zhengpin span {
    color: #585c64;
    font-size: 15px;
}
.jiantou {
    margin-left: 115px;
}

.bottom {
    width: 100%;
    height: 79px;
    background-color: #fff;
    display: flex;
    padding-top: 8px;
    /* justify-content: space-between; */
}
.count {
    display: flex;
}
.tubiao {
    margin-left: 20px;
    margin-top: 8px;
}
.tubiao img {
    width: 27px;
    height: 27px;
}
.jiage1 {
    width: 145px;
    height: 72px;
    background-color: #F688A4;
    border-radius: 10px 0 0 10px;
    margin-left: 55px;
    font-size: 24.5px;
    color: #fff;
    text-decoration: line-through;
    
}
.jiage1 span {
    margin-left: 30px;
    line-height: 70px;
}
.jiage2 {
    width: 145px;
    height: 72px;
    background-color: #F03867;
    border-radius: 0 10px 10px 0;
}
.jiage2 .pri {
    font-size: 24.5px;
    color: #fff;
    /* text-align: center; */
    /* vertical-align: middle; */
    margin: 10px 37px;
}
.jiage2 .pri2 {
    font-size: 17px;
    color: #fff;
    margin-left: 30px;
    margin-top: -15px;
}
.jiage2 .pri2 img {
    width: 15px;
}
</style>
